<template>
  <div class="search-form-box">
    <el-form
      ref="queryForm"
      :model="queryParams"
      size="small"
      inline
      label-width="100px"
      @submit.native.prevent
    >
      <el-form-item v-for="(item, index) in formOptions" :key="index" :label="item.label" :prop="item.prop">
        <el-input v-if="item.type=='input'" v-model="queryParams[item.prop]" :placeholder="item.placeholder?item.placeholder:&quot;请输入&quot;" clearable @keyup.enter.native="onSearch" />
        <el-select v-if="item.type=='select'" v-model="queryParams[item.prop]" :placeholder="item.placeholder?item.placeholder:&quot;请选择&quot;" :filterable="item.filterable?item.filterable:false" clearable>
          <el-option
            v-for="list in item.options"
            :key="list.value"
            :label="list.label"
            :value="list.value"
          />
        </el-select>
        <el-cascader
          v-if="item.type=='cascader'"
          v-model="queryParams[item.prop]"
          :placeholder="item.placeholder?item.placeholder:&quot;请选择&quot;"
          :options="item.options"
          :props="item.props"
          :show-all-levels="false"
          clearable
          filterable
        >
        </el-cascader>
        <el-date-picker
          v-if="item.type=='date'"
          v-model="queryParams[item.prop]"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 自定义插槽，可用于特殊表单块 -->
      <slot name="other" />
      <el-form-item v-if="formOptions.length>0" class="search-form-button">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
      </el-form-item>
      <el-row :gutter="10" class="mb8 table-tool">
        <el-col v-if="btnItems.includes('add')" :span="1.5">
          <el-tooltip :open-delay="600" content="添加" placement="bottom">
            <el-button
              type="text"
              plain
              icon="iconfont icon-tool-add"
              size="mini"
              @click="onAdd"
            />
          </el-tooltip>
        </el-col>
        <el-col v-if="btnItems.includes('delete')" :span="1.5">
          <el-tooltip :open-delay="600" content="批量删除" placement="bottom">
            <el-button
              type="text"
              plain
              icon="iconfont icon-tool-delete"
              size="mini"
              @click="onDelete"
            />
          </el-tooltip>
        </el-col>
        <el-col v-if="btnItems.includes('download')" :span="1.5">
          <el-tooltip :open-delay="600" content="下载模板" placement="bottom">
            <el-button
              type="text"
              plain
              icon="iconfont icon-tool-expand"
              size="mini"
              @click="onDownload"
            />
          </el-tooltip>
        </el-col>
        <el-col v-if="btnItems.includes('import')" :span="1.5">
          <el-tooltip :open-delay="600" content="导入" placement="bottom">
            <el-button
              type="text"
              plain
              icon="iconfont icon-tool-import"
              size="mini"
              @click="onImport"
            />
          </el-tooltip>
        </el-col>
        <el-col v-if="btnItems.includes('export')" :span="1.5">
          <el-tooltip :open-delay="600" content="导出" placement="bottom">
            <el-button
              type="text"
              plain
              icon="iconfont icon-tool-export"
              size="mini"
              @click="onExport"
            />
          </el-tooltip>
        </el-col>
        <el-col :span="1.5">
          <slot name="otherBtn"></slot>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'FormSearch',
  props: {
    /**
		 * 表单配置
		 * formOptions:[{
		 *   label: '查询名', // label文字
		 *   prop: 'name', // 字段名
		 *   type: 'input、select、cascader、date', // 类型目前有三种 input:文本  select:选择器  cascader:级联选择器  date:时间选择器
		 *   options: [], // select选择器的选项数据
		 *   placeholder: '请输入查询名', // 提示文本
     *   props:{}, // 自定义节点内容,多用于级联选择器
		 * }]
		 */
    formOptions: {
      type: Array,
      default() {
        return []
      }
    },
    // 提交按钮项，多个用逗号分隔（add,delete,download,import,export）
    btnItems: {
      type: String,
      default() {
        return 'add,delete'
      }
    }
  },
  data() {
    return {
      queryParams: {}
    }
  },
  created() {
    this.addInitValue()
  },
  methods: {
    // 搜索
    onSearch() {
      this.onValidate(() => {
        this.$emit('onSearch', this.queryParams)
      })
    },
    // 添加
    onAdd() {
      this.onValidate(() => {
        this.$emit('onAdd')
      })
    },
    // 删除
    onDelete() {
      this.onValidate(() => {
        this.$emit('onDelete')
      })
    },
    // 下载模板
    onDownload() {
      this.onValidate(() => {
        this.$emit('onDownload')
      })
    },
    // 导入
    onImport() {
      this.onValidate(() => {
        this.$emit('onImport', this.queryParams)
      })
    },
    // 导出
    onExport() {
      this.onValidate(() => {
        this.$emit('onExport')
      })
    },
    // 重置
    onReset() {
      const _this = this
      Object.keys(this.queryParams).forEach(key => {
        _this.queryParams[key] = ''
        _this.onSearch()
      })
    },
    // 添加初始值
    addInitValue() {
      const obj = {}
      this.formOptions.forEach(v => {
        if (v.initValue !== undefined) {
          obj[v.prop] = v.initValue
        }
      })
      this.queryParams = obj
    },
    // 校验
    onValidate(callback) {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          callback()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cascader{
  max-width: 600px;
}
</style>

